// Call this from the developer console and you can control both instances
var calendars = {};

$(document).ready( function() {
    // console.info(
    //     'Welcome to the CLNDR demo. Click around on the calendars and' +
    //     'the console will log different events that fire.');

    // Assuming you've got the appropriate language files,
    // clndr will respect whatever moment's language is set to.
    // moment.locale('ru');

    // Here's some magic to make sure the dates are happening this month.
    var thisMonth = moment().format('YYYY-MM');
    // Events to load into calendar
    var eventArray = [
        {
            title: 'Multi-Day Event',
            endDate: thisMonth + '-14',
            startDate: thisMonth + '-10'
        }, {
            endDate: thisMonth + '-23',
            startDate: thisMonth + '-21',
            title: 'Another Multi-Day Event'
        }, {
            date: thisMonth + '-27',
            title: 'Single Day Event'
        }
    ];

    // The order of the click handlers is predictable. Direct click action
    // callbacks come first: click, nextMonth, previousMonth, nextYear,
    // previousYear, nextInterval, previousInterval, or today. Then
    // onMonthChange (if the month changed), inIntervalChange if the interval
    // has changed, and finally onYearChange (if the year changed).
    var _datedays={};
    $.get(_cl_table_url || 'json/date.json',{},function(res){
        console.log(res);
        _datedays=res.datedays;
        cln();
    })
    $('body').on('click',function(e){
        if($(e.target).parents('.clndr-table').length==0 && !$(e.target).hasClass('calendar_box') && $(e.target).parents('.calendar_box').length==0){
            $('.calendar_box').addClass('hide')
        }
    })
    function cln(){
        calendars.clndr1 = $('.cal1').clndr({
            render: function (data) {
                data.datedays=_datedays;

                //var clndrTemplate = doT.template($('#dot-template').html());
                //return clndrTemplate(data);
               var t= _.template(clndrTemplate)(data);
               return t;
            },
            events: eventArray,
            clickEvents: {
                click: function (target) {
                    //console.log('Cal-1 clicked: ', target);
                    var _w=$('body').width();
                    var t=$(target.element);
                    var num=t.find('.cl_span1').attr('data-num');
                    num=Number(num);
                    var u=$('.calendar_box');
                    u.addClass('hide').removeClass('left right')
                    if(num>0){
                       
                    }else{
                        return ;
                    }
                    var ft=t.offset();
                    var w=t.width();
                    if(_w/2>ft.left){//left
                        //u.removeClass('hide')
                        var b=ft.top-u.height()/2+5;
                        var c=ft.left+t.width()+28;
                        u.css({top:b+'px',left:c+'px'}).addClass('left')
                    }else{
                        //u.removeClass('hide')
                        var b=ft.top-u.height()/2+5;
                        var c=ft.left-u.width()-80;
                        u.css({top:b+'px',left:c+'px'}).addClass('right')
                    }
                    clickcall(target);
                },
                today: function () {
                    console.log('Cal-1 today');
                },
                nextMonth: function () {
                    console.log('Cal-1 next month');
                },
                previousMonth: function () {
                    console.log('Cal-1 previous month');
                },
                onMonthChange: function () {
                    console.log('Cal-1 month changed');
                },
                nextYear: function () {
                    console.log('Cal-1 next year');
                },
                previousYear: function () {
                    console.log('Cal-1 previous year');
                },
                onYearChange: function () {
                    console.log('Cal-1 year changed');
                },
                nextInterval: function () {
                    console.log('Cal-1 next interval');
                },
                previousInterval: function () {
                    console.log('Cal-1 previous interval');
                },
                onIntervalChange: function () {
                    console.log('Cal-1 interval changed');
                }
            },
            multiDayEvents: {
                singleDay: 'date',
                endDate: 'endDate',
                startDate: 'startDate'
            },
            showAdjacentMonths: true,
            adjacentDaysChangeMonth: false
        });

        $(calendars.clndr1).bind('SetDate', function(d){
            console.log(d);
        });
    }
    

    // Bind all clndrs to the left and right arrow keys
    $(document).keydown( function(e) {
        // Left arrow
        if (e.keyCode == 37) {
            calendars.clndr1.back();
            calendars.clndr2.back();
            calendars.clndr3.back();
        }

        // Right arrow
        if (e.keyCode == 39) {
            calendars.clndr1.forward();
            calendars.clndr2.forward();
            calendars.clndr3.forward();
        }
    });
});